<template>
  <div class="wrap">
    <!-- 主体头部（标题、搜索框） -->
    <div class="Index_header">
      <div class="left">
        <p>项目控制台</p>
      </div>
      <div class="right">
        <el-select v-model="form.region" placeholder="请选择">
          <el-option label="区域一" value="shanghai"></el-option>
          <el-option label="区域二" value="beijing"></el-option>
        </el-select>
      </div>
    </div>
    <!-- 图表 -->
    <div class="charts">
      <!-- 头部图标数据展示 -->

      <div class="charts_number">
        <div class="charts_number_one">
          <p>合同总金额（万）</p>
          <div class="charts_number_icon">
            <i class="iconfont icon-hetong"></i>
          </div>
          <div class="charts_text_number">
            <p>￥{{ numberData.totalMoney }}</p>
            <p>￥{{ numberData.sumHeTongMoney }}</p>
          </div>
        </div>
        <div class="charts_number_one">
          <p>成本总支出（万）</p>
          <div class="charts_number_icon charts_number_icon_two">
            <i class="iconfont icon-hetong"></i>
          </div>
          <div class="charts_text_number">
            <p>￥{{ numberData.chengBenZhiChuMoney }}</p>
          </div>
        </div>
        <div class="charts_number_one">
          <p>回款总金额（万）</p>
          <div class="charts_number_icon charts_number_icon_three">
            <i class="iconfont icon-zongjine"></i>
          </div>
          <div class="charts_text_number">
            <p>￥{{ numberData.huiKuanMoney }}</p>
          </div>
        </div>
        <div class="charts_number_one">
          <p>回款率（%）</p>
          <div class="charts_number_icon charts_number_icon_four">
            <i class="iconfont icon-caiwu"></i>
          </div>
          <div class="charts_text_number">
            <p>{{ `${numberData.huiKuanLv * 100}` }}%</p>
          </div>
        </div>
      </div>

      <!-- 数据图表 -->
      <div class="echarts">
        <!--  地图组件 -->

        <div ref="chinaMap" id="echarts_map">
          <china-map></china-map>
        </div>

        <!-- 柱形图组件--收支 -->
        <div class="ColumnChart" ref="ColumnChart"></div>
      </div>
      <div class="echarts_line2">
        <!-- 柱形图组件--施工进度 -->
        <div class="schedule" ref="schedule"></div>

        <!-- 饼图--成本分析 -->
        <div class="cost" ref="cost"></div>
      </div>
    </div>

    <!-- 首页功能区 -->
    <div class="fun">
      <!-- 左侧功能区 -->
      <div class="fun_left">
        <!-- 内部管理 -->
        <div class="fun_left_top">
          <p>内部管理</p>

          <div class="fun_left_top_line">
            <!-- 工作日报 -->
            <div class="work_day" @click="toDaily">
              <i class="iconfont icon-ribaodaily19"></i><br />
              <span>工作日报</span>
            </div>
            <!-- 考勤打卡 -->
            <div class="clock_in">
              <i class="iconfont icon-kaoqinchuqin"></i><br />
              <span>考勤打卡</span>
            </div>
            <div></div>
          </div>
        </div>
        <!-- 审批流程 -->
        <div class="fun_left_bottom">
          <p>审批流程</p>
          <div class="fun_left_bottom_line_one line">
            <!-- 班组付款申请 -->
            <div class="pay_apply">
              <i class="iconfont icon-hetongqicao"></i>
              <p>班组付款申请</p>
            </div>
            <!-- 材料采购付款申请 -->
            <div class="stuff_pay_apply">
              <i class="iconfont icon-gouwuche-tianchong"></i>
              <p>材料采购付款申请</p>
            </div>
            <!-- 临时付款申请 -->
            <div class="temporary_pay_apply">
              <i class="iconfont icon-fukuan"></i>
              <p>临时付款申请</p>
            </div>
          </div>
          <div class="fun_left_bottom_line_two line">
            <!-- 用章申请 -->
            <div class="use_seal_apply">
              <i class="iconfont icon-yongzhangshenqing"></i>
              <p>用章申请</p>
            </div>
            <!-- 选样申请 -->
            <div class="sample_apply">
              <i class="iconfont icon-hezi"></i>
              <p>选样申请</p>
            </div>
            <!-- 联系单签发申请 -->
            <div class="contact_list_apply">
              <i class="iconfont icon-gongzuolianxidan"></i>
              <p>联系单签发申请</p>
            </div>
          </div>
          <div class="fun_left_bottom_line_three line">
            <!-- 材料采购申请 -->
            <div class="stuff_apply">
              <i class="iconfont icon-gouwuche-tianchong"></i>
              <p>材料采购申请</p>
            </div>
            <!-- 劳务申请 -->
            <div class="labour_services_apply">
              <i class="iconfont icon-laowu"></i>
              <p>劳务申请</p>
            </div>
            <div></div>
          </div>
        </div>
      </div>
      <!-- 右侧功能区 -->
      <div class="fun_right">
        <p>待办事项</p>
        <!-- 待办事项tab选项卡 -->
        <div class="nedd_deel_tab" ref="nedd_deel_tab">
          <li
            @click="neddDeelTab(1)"
            :class="isShow == 1 ? 'nedd_deel_tab_active' : ''"
          >
            任务待办
          </li>
          <li
            @click="neddDeelTab(2), toBeReviewed()"
            :class="isShow == 2 ? 'nedd_deel_tab_active' : ''"
          >
            待审批
          </li>

          <div
            class="nedd_deel_tab_content_one tabcontent"
            :class="isShow == 1 ? 'tabcontent_active' : ''"
            ref="nedd_deel_tab_content_one"
          >
            <div
              class="nedd_deel_tab_content_one_list"
              v-for="(v, i) in needDeelData"
              :key="i.id"
            >
              <div class="left">
                <p>{{ v.taskName }}</p>
                <p>截止于：{{ v.endDate }}</p>
              </div>
              <div class="right">
                <div class="demo-image">
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="v.touXiang"
                    fit="cover"
                  ></el-image>
                </div>
              </div>
            </div>
            <div id="pages">
              <el-pagination
                background
                layout="prev, pager, next"
                @current-change="changeNeddDeelCurrentPage"
                :current-page="neddDeelCurrentPage"
                :page-size="neddDeelPageSize"
                :total="needDeelTotal"
              >
              </el-pagination>
            </div>
          </div>

          <!-- 待审批 -->
          <div
            class="nedd_deel_tab_content_two tabcontent"
            :class="isShow == 2 ? 'tabcontent_active' : ''"
            ref="nedd_deel_tab_content_two"
          >
            <template>
              <el-table :data="ExamineData" border style="width: 100%">
                <el-table-column prop="id" label="序号" width="180">
                </el-table-column>
                <el-table-column prop="title" label="标题" width="180">
                </el-table-column>
                <el-table-column prop="type" label="类型"> </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button
                      @click="handleClick(scope.row)"
                      type="text"
                      size="small"
                      >审批</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>

              <!-- 分页 -->
              <div id="pages">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  @current-change="changeNeddDeelCurrentPage2"
                  :current-page="neddDeelCurrentPage2"
                  :page-size="neddDeelPageSize2"
                  :total="needDeelTotal2"
                >
                </el-pagination>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>

    <!-- 公司新闻公告 -->
    <div class="news_notice">
      <p>公司新闻公告</p>
      <template>
        <el-table :data="newsNoticeData" border style="width: 90%">
          <el-table-column type="index" width="50" label="序号">
          </el-table-column>
          <el-table-column prop="title" label="标题" width="180">
          </el-table-column>
          <el-table-column prop="createTime" label="发布日期">
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div id="pages" style="text-align: center">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="changeNewsCurrentPage"
            :current-page="newsCurrentPage"
            :page-size="newsPageSize"
            :total="newsTotal"
          >
          </el-pagination>
        </div>
      </template>
    </div>
  </div>
</template>
<style src="../../../style/index.css">
</style>
<script>
// import testData from "../../../utils/testData";
import chinaMap from "../../../components/chinaMap.vue";
export default {
  data() {
    return {
      // 任务待办分页
      neddDeelCurrentPage: 1,
      neddDeelPageSize: 4,
      needDeelTotal: 1,
      // 待审批分页
      neddDeelCurrentPage2: 1,
      neddDeelPageSize2: 5,
      needDeelTotal2: 1,
      // 公司新闻公告分页
      newsCurrentPage: 1,
      newsPageSize: 5,
      newsTotal: 1,
      form: {
        region: "",
      },
      // 可视化数据
      numberData: {
        chengBenZhiChuMoney: "",
        huiKuanLv: "",
        huiKuanMoney: "",
        sumHeTongMoney: "",
      },
      // 地图数据
      mapData: [],
      // 收支情况柱形图数据
      ColumnChartData: [
        {
          income: "500",
          name: "苏州地铁项目",
          pay: "1100",
        },
      ],
      // 项目进度情况柱形图数据
      scheduleChartData: [
        {
          nowSchedule: "15",
          totalSchedule: "3.5",
        },
        {
          nowSchedule: "20",
          totalSchedule: "9.5",
        },
        {
          nowSchedule: "11",
          totalSchedule: "7",
        },
        {
          nowSchedule: "19",
          totalSchedule: "19",
        },
      ],
      ColumnChartDataTit: [],
      ColumnChartIncome: [],
      ColumnChartPay: [],
      ChartTotalSchedule: [],
      ChartNowSchedule: [],
      // 成本分析
      costData: [
        { value: 300, name: "材料采购", itemStyle: { color: "#73A0FA" } },
        { value: 470, name: "劳务支出", itemStyle: { color: "#73DEB3" } },
        { value: 100, name: "临时付款", itemStyle: { color: "#7585A2" } },
        { value: 150, name: "其他支出", itemStyle: { color: "#F7C739" } },
      ],
      // 待办事项
      needDeelData: [
        {
          createBy: "",
          createEmpName: "",
          endDate: "",
          id: "",
          taskName: "",
          touXiang: "",
        },
      ],
      // 待办事项分页
      currentPage: 1,
      pageSize: 5,
      // 待办事项tab显示
      isShow: 1,
      ExamineData: [
        {
          id: "1",
          title: "苏州地铁项目申请",
          type: "材料付款审批",
        },
        {
          id: "2",
          title: "北京地铁项目申请",
          type: "材料付款审批",
        },
        {
          id: "3",
          title: "深圳地铁项目申请",
          type: "材料付款审批",
        },
        {
          id: "4",
          title: "上海地铁项目申请",
          type: "材料付款审批",
        },
        {
          id: "5",
          title: "武汉地铁项目申请",
          type: "材料付款审批",
        },
      ],
      newsNoticeData: [
        {
          content: "",
          createBy: "",
          createTime: "",
          id: "",
          noticeTypeId: "",
          title: "",
        },
      ],
    };
  },
  methods: {
    // 任务待办分页
    changeNeddDeelCurrentPage(index) {
      this.neddDeelCurrentPage = index;
      this.getToDoList();
    },
    // 待审批分页
    changeNeddDeelCurrentPage2(index) {
      this.neddDeelCurrentPage2 = index;
      this.toBeReviewed();
    },
    // 公司新闻公告分页
    changeNewsCurrentPage(index) {
      this.newsCurrentPage = index;
      this.getNews();
    },

    // 项目收支情况图

    incomePayCharts() {
      for (let i = 0; i < this.ColumnChartData.length; i++) {
        this.ColumnChartDataTit.push(this.ColumnChartData[i].name);
        this.ColumnChartIncome.push(this.ColumnChartData[i].income);
        this.ColumnChartPay.push(this.ColumnChartData[i].pay);
      }
      let myChart = this.$echarts.init(this.$refs.ColumnChart);
      // 绘制图表
      myChart.setOption({
        title: {
          text: "项目收支情况",
          subtext: "数据每日24点更新",
        },
        tooltip: {},
        xAxis: {
          data: this.ColumnChartDataTit,
        },
        yAxis: {},
        series: [
          {
            name: "收入情况",
            type: "bar",
            data: this.ColumnChartIncome,
            color: "#5B8FF9",
          },
          {
            name: "支出情况",
            type: "bar",
            data: this.ColumnChartPay,
            color: "#49C7BF",
          },
        ],
        legend: {
          textStyle: {
            //图例字体大小
            fontSize: 10,
          },
          //图例大小
          itemHeight: 10,
          //图例滚动显示
          type: "scroll",
          //图例纵向显示
          orient: "vertical",
          //图例位置
          right: 50,
          top: 30,
          bottom: 30,
        },
      });
    },

    // 项目进度图

    schedule() {
      for (let i = 0; i < this.scheduleChartData.length; i++) {
        // this.ChartTotalSchedule.push(this.ColumnChartData[i].name)
        this.ChartTotalSchedule.push(this.scheduleChartData[i].totalSchedule);
        this.ChartNowSchedule.push(this.scheduleChartData[i].nowSchedule);
      }
      let myChart = this.$echarts.init(this.$refs.schedule);
      // 绘制图表
      myChart.setOption({
        title: {
          text: ["项目进度情况"],
          subtext: "数据每日24点更新",
        },
        tooltip: {},
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: this.ColumnChartDataTit,
          axisLabel: {
            textStyle: {
              fontSize: 10,
            },
          },
        },
        series: [
          {
            name: "施工进度",
            type: "bar",
            data: this.ChartNowSchedule,
            color: "#5B8FF9",
          },
          {
            name: "总进度",
            type: "bar",
            data: this.ChartTotalSchedule,
            color: "#49C7BF",
          },
        ],
        legend: {
          //图例大小
          itemHeight: 10,
          //图例滚动显示
          type: "scroll",
          //图例纵向显示
          orient: "vertical",
          //图例位置
          right: 50,
          top: 30,
          bottom: 30,
        },
      });
    },

    // 项目成本分析图

    cost() {
      let myChart = this.$echarts.init(this.$refs.cost);
      // 绘制图表
      myChart.setOption({
        title: {
          text: ["项目成本"],
          subtext: "数据每日24点更新",
          left: "left",
        },
        tooltip: { trigger: "item" },
        legend: {
          orient: "vertical",
          bottom: "bottom",
        },
        series: [
          {
            name: "成本分析",
            type: "pie",
            color: "#5B8FF9",
            data: this.costData,
          },
        ],
        // itemStyle: {
        //   normal: {
        //     color: function (colors) {
        //       var colorList = [
        //         '#fc8251',
        //         '#5470c6',
        //         '#91cd77',
        //         '#ef6567',
        //       ];
        //       return colorList[colors.dataIndex];
        //     }
        //   }
        // },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      });
    },

    // tab选项卡
    neddDeelTab(index) {
      this.isShow = index;
    },
    // 待办事项分页组件
    changeCurrentPage(index) {
      console.log(index);
    },
    // 工作日报
    toDaily() {
      console.log(123);
      this.$router.push("/home/index/daily");
    },

    // ---------------------------------API部分----------------------------------------------------------------

    // 获取顶端可视化数据
    getNumber() {
      this.$indexApi.getNumber().then((res) => {
        if (res.data.code == 200) {
          this.numberData = res.data.data;
        }
      });
    },
    // 获取项目收支情况
    revenueExpenditure() {
      this.$indexApi.revenueExpenditure().then((res) => {
        if (res.data.code == 200) {
          this.ColumnChartData = res.data.data;
          this.incomePayCharts();
          this.schedule();
        }
      });
    },
    // 获取成本数据
    getCost() {
      this.$indexApi
        .getCost()
        .then((res) => {
          if (res.data.code == 200) {
            this.costData = res.data.data;
            for (let i = 0; i < this.costData.length; i++) {
              let randomColor = parseInt(Math.random() * 100);
              this.costData[i].itemStyle = {
                color:
                  "rgb(" +
                  randomColor +
                  "," +
                  (randomColor + 50) +
                  "," +
                  (randomColor + 130) +
                  ")",
              };
            }
            this.cost();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取待办事项
    getToDoList() {
      this.$indexApi
        .getToDoList(this.neddDeelCurrentPage, this.neddDeelPageSize)
        .then((res) => {
          if (res.data.code == 200) {
            this.needDeelData = res.data.data;
          }
        })
        .catch((err) => {
          console.log(err);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取待审核
    toBeReviewed() {
      this.$indexApi
        .toBeReviewed(this.neddDeelCurrentPage2, this.neddDeelPageSize2)
        .then((res) => {
          console.log(res);
          if (res.data.code == 200) {
            console.log(res);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取公司新闻公告
    getNews() {
      this.$indexApi
        .getNews(this.newsCurrentPage, this.newsPageSize)
        .then((res) => {
          if (res.data.code == 200) {
            this.newsNoticeData = res.data.data;
            this.newsTotal = res.data.total;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  created() {},
  mounted() {
    this.getCost();
    this.revenueExpenditure();
    this.getNumber();
    // 任务待办
    this.getToDoList();
    // 新闻公告
    this.getNews();
  },
  computed: {},
  components: {
    chinaMap,
  },
};
</script>

<style scoped lang="less">
</style>
